extends layout

block content
	link(rel='stylesheet', href='/stylesheets/home.css')

	a.anchor(id='top')
	include header

	div.category-menu
		div.container
			div.ui.large.secondary.pointing.menu
				a.active.item 主页
				each tag in tags
					a.item(href='/category?tag_id='+'#{tag.tag._id}'+'\&sorted=latest') #{tag.tag.tag_name}

	div.sticky-menu
		div.ui.sticky
			div.ui.middle.aligned.animated.list
				each tag in tags
					div.item
						a.ui.button(href='#'+'#{tag.tag.tag_name}') #{tag.tag.tag_name}
				div.ui.divider
				a.ui.icon.button(href='#top')
					i.big.fitted.caret.up.icon(style='margin-top:-6px;')

	div.page-content
		div.preview
			div.container
				div.l-preview
					div.topic-preview-wrapper
						a.ui.card(href='/editor')
							div.image
								img(src='resources/images/topic.png')
				div.r-preview
					div.list-preview-wrapper
						ul
							- var blank = 8 - tot_hotest_music.length
							each music in tot_hotest_music
								li
									div.ui.card.small-item
										div.blurring.dimmable.image.small-item
											if music.based_on
												div.ui.left.corner.violet.label
													p.label-content 改
											else
												div.ui.left.corner.orange.label
													p.label-content 原
											img(src='uploads/covers/'+'#{music.cover}')
											a.ui.dimmer(href='/music?music_id='+'#{music._id}')
												p.title #{music.name}
												p.info 作者: #{music.author.username}
												p.info 播放: #{music.listenN}
							- for (var i = 0; i < blank; ++i)
								li
									div.ui.card.small-item
										div.blurring.dimmable.image.small-item
											img(src='uploads/covers/default_cover.png')

		each tag in tags
			div.category
				a.anchor(id='#{tag.tag.tag_name}')
				div.container
					div.l-list
						div.ui.secondary.menu
							div.item
								h2 #{tag.tag.tag_name}
							div.right.menu
								div.item
									a.ui.basic.button(href='/category?tag_id='+'#{tag.tag._id}'+'\&sorted=latest') 更多
						div.content-wrapper
							ul
								- var blank = 10 - tag.newest_music.length
								each music in tag.newest_music
									li
										div.ui.card.small-item
											div.blurring.dimmable.image.small-item
												if music.based_on
													div.ui.left.corner.violet.label
														p.label-content 改
												else
													div.ui.left.corner.orange.label
														p.label-content 原
												img(src='uploads/covers/'+'#{music.cover}')
												a.ui.dimmer.x-dimmer(href='/music?music_id='+'#{music._id}')
													img.ui.circular.image.x-avator(src='uploads/heads/'+'#{music.author.profile}')
													p.info 作者: #{music.author.username}
										a(href='/music?music_id='+'#{music._id}') #{music.name}
										div.v-info
											span.bf
												i.toggle.right.icon
												span #{music.listenN}
											span.pl
												i.comment.outline.icon
												span #{music.commentN}

								- for (var i = 0; i < blank; ++i)
									li
										div.ui.card.small-item
											div.blurring.dimmable.image.small-item
												img(src='uploads/covers/default_cover.png')
										
					div.r-list
						div.rank
							div.ui.secondary.menu
								h3.item 排行
								div.right.menu
									div.item
										a.ui.basic.button(href='/category?tag_id='+'#{tag.tag._id}'+'\&sorted=hotest') 更多
							div.content-wrapper
								div.ui.selection.list
									- var index = 1
									each music in tag.hotest_music
										a.item(href='/music?music_id='+'#{music._id}')
											if index < 4
												div.ui.red.horizontal.label #{index}
											else
												div.ui.horizontal.label #{index}
											div.title #{music.name}
											- index += 1

	include footer

	script(src="/javascripts/home.js")